[Day 07] 深入介紹掛載底層機制_import為何有時用大括號有時不用?

2023 iThome 鐵人賽

DAY 7

Vue.js

.NET Core與Vue3組合開發技系列第 7 篇

15th鐵人賽

Samuel

2023-09-16 09:49:36

487 瀏覽

分享至

在 Vue 專案的 src 文件下，有一個 main.js 文件，該文件稱為主配置文件，
舉凡是 Vue 應用相關的前置作業、配置，如導入路由組件、導入根組件並進行配置，都是在 main.js 文件中完成的。

main.js程式碼

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

import為何有時用大括號有時不用?

在新版 Vue 應用中，都是使用 createApp()函數創建一個新的 App 應用實體的，Vue CLI已經幫我們編寫好了一個開箱即用的函數。因此每個 App 應用其實都是一個 Vue Application Instance。

使用時，需要通過如下程式碼導入 createApp：

import { createApp } from 'vue'

這裡要注意，導入 createApp()函數時，要使用花括號{}括起來，createApp()函數只是 vue 的部分函數，不是整個模組整體，所以要使用大花括號 {}括起來。

使用 createApp()函數創建 Vue 應用實例時，需要掛載一個 App 應用，這裡將 App.vue 導入後，讓 createApp()函數掛載。

App.vue 是整體導入的，是 Vue 應用程式的根組件，也是呈現內容的地方，所以是整個導入的，無需使用{}。

import App from './App.vue'

在使用 createApp(App)創建了應用後，需要將App 應用掛載到某個 HTML 元素上。
使用 createApp(App).mount(HTML 元素物件) 來掛載應用。

createApp(App).mount('#app')

將 App.vue 根組件中的內容在 id="app"的 HTML 元素中顯示出來。
這個 id是"app"的 HTML 元素就存放在 index.html 文件中。

main.js 是加載到 index.html 文件中被執行的，現在的 Vue 新項目中，main.js 都是後台自動適配的
~\myvue1\public\index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

這裡可格外注意到此index.html並未有任何顯示引入js的部分，主要就是因為是透過vue cli建立的關係。

本篇已同步發表至個人部落格
https://coolmandiary.blogspot.com/2023/09/2023day-07-import.html